<!-- 水平鉴权 -->

<template>
  <div class="page-container">

    <el-form :inline="true" :model="formData.queryParams" class="demo-form-inline">
      <el-form-item label="预登录用户" style="width: 220px">
        <el-select
          v-model="formData.queryParams.username"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in formData.userDict"
            :key="item.username"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>

<!--      （使用该账户登录后的返回数据作为入参测试水平越权）-->
      <el-form-item label="越权账户" style="width: 220px">
        <el-select
          v-model="formData.queryParams.username2"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in formData.userDict"
            :key="item.username"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <!--      （使用该账户登录后的返回数据作为入参测试水平越权）-->
      <el-form-item label="个人信息中对比字段" style="width: 320px">
        <el-select
          v-model="formData.queryParams.personalInfoParams"
          clearable
          placeholder="请选择"
          multiple
        >
          <el-option
            v-for="item in formData.loginParamsDict"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
<!--      （预登录账户权限外的入参信息）-->
      <el-form-item label="越权入参补充" class="longInput" style="width: 520px">
        <el-input
          v-model="formData.queryParams.queryParam"
          placeholder="请输入"
          clearable
          type="textarea"
          rows="1"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="tableData.initList">查询</el-button>
      </el-form-item>
    </el-form>

    <div class="Report">
      <p>共验证接口 <span>22</span> 个</p>
<!--      <p>可成功请求的接口数为： <span>22</span>个，未有越权问题。</p>-->

      <p>可成功请求的接口为 <span>20</span> 个，存在安全问题的接口为 <span>2</span> 个，详情如下：</p>

      <ElTable :data="tableData.LeftData" stripe>
        <ElTableColumn prop="url" label="接口"> </ElTableColumn>
        <ElTableColumn prop="queryParams" label="请求参数"> </ElTableColumn>
        <ElTableColumn prop="res" label="返回结果"> </ElTableColumn>
      </ElTable>
    </div>


    <el-row class="elRowWrap">
      <div class="titWrap">全部接口请求明细</div>
      <el-col :span="12" class="left">
        <div class="tit">正常参数请求</div>
        <ElTable :data="tableData.LeftData" stripe>
          <ElTableColumn prop="url" label="接口"> </ElTableColumn>
          <ElTableColumn prop="queryParams" label="请求参数"> </ElTableColumn>
          <ElTableColumn prop="res" label="返回结果"> </ElTableColumn>
        </ElTable>
      </el-col>
      <el-col :span="12" class="right">
        <div class="tit">篡改参数请求</div>
        <ElTable :data="tableData.RightData" stripe>
          <ElTableColumn prop="url" label="接口"> </ElTableColumn>
          <ElTableColumn prop="queryParams" label="请求参数"> </ElTableColumn>
          <ElTableColumn prop="res" label="返回结果"> </ElTableColumn>
        </ElTable>
      </el-col>
    </el-row>


<!--    <ElPagination-->
<!--      :current-page="formData.queryParams.pageNum"-->
<!--      :page-sizes="[10, 20, 30, 50]"-->
<!--      :page-size="formData.queryParams.pageSize"-->
<!--      layout="total, sizes, prev, pager, next, jumper"-->
<!--      :total="reactiveData.pageTotal"-->
<!--      @size-change="reactiveData.handleSizeChange"-->
<!--      @current-change="reactiveData.handleCurrentChange"-->
<!--    />-->


<!--    <el-dialog v-model="dialogData.dataViewDialog" title="查看信息" width="80%" top="8vh">-->
<!--      <div class="dataView cf">-->
<!--        <div class="item">-->
<!--          <span class="str">账号</span>-->
<!--          <p>{{ dialogData.curRow.loginName }}</p>-->
<!--        </div>-->
<!--        <div class="item">-->
<!--          <span class="str">姓名</span>-->
<!--          <p>{{ dialogData.curRow.realName }}</p>-->
<!--        </div>-->
<!--        <div class="item">-->
<!--          <span class="str">手机号</span>-->
<!--          <p>{{ dialogData.curRow.tel }}</p>-->
<!--        </div>-->
<!--        <div class="item">-->
<!--          <span class="str">职务</span>-->
<!--          <p>{{ dialogData.curRow.post }}</p>-->
<!--        </div>-->
<!--        <div class="item">-->
<!--          <span class="str">用户类型</span>-->
<!--          <p>{{ useGlobal.userType[dialogData.curRow.userType] }}</p>-->
<!--        </div>-->
<!--        <div class="item">-->
<!--          <span class="str">状态</span>-->
<!--          <p>{{ useGlobal.userState[dialogData.curRow.userState] }}</p>-->
<!--        </div>-->
<!--        <div class="item">-->
<!--          <span class="str">部门</span>-->
<!--          <p>{{ dialogData.curRow.departmentName }}</p>-->
<!--        </div>-->
<!--      </div>-->
<!--      <template #footer>-->
<!--        <span class="dialog-footer">-->
<!--          <el-button type="primary" @click="dialogData.dataViewDialog = false">确定</el-button>-->
<!--        </span>-->
<!--      </template>-->
<!--    </el-dialog>-->
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import axios from '@/utils/axios'
import useGlobal from '@/utils/globalDict'
// import createUser from './createUser.vue'

// import deptTree from './deptTree.json'
import userList from './UserManage/userList.json'

// const dialogData = reactive({
//   dataViewDialog: false,
//   curRow: {
//     loginName: '',
//     realName: '',
//     tel: '',
//     departmentId: '',
//     post: '',
//     passwd: '',
//     userState: '',
//     departmentName: '',
//     userType: '',
//   },
//   dialogVisible: false, // 新增用户
//   isCreateMode: false,
//   createUser() {
//     console.log('uuu');
//     dialogData.curRow = {
//       loginName: '',
//       realName: '',
//       tel: '',
//       departmentId: '',
//       post: '',
//       passwd: '',
//       userState: '',
//       departmentName: '',
//       userType: '',
//     }
//     dialogData.isCreateMode = true
//     dialogData.dialogVisible = true
//   }
// })

// 预登录用户个人信息
const userInfo = {userid: "1", username: "admin", nickname: "系统管理员"}
const UIKeys = Object.keys(userInfo)

// 登录用户列表 读取缓存
let userDict = []
const AccountList = localStorage.getItem('AccountList')
if( AccountList ) userDict = JSON.parse(AccountList)

// formData
const formData = reactive({
  userDict: userDict,
  loginParamsDict: UIKeys,
  queryParams: {
    username: '', // 	部门ID
    username2: '', // 用户状态
    personalInfoParams:'',
    queryParam: '', // 关键字(公示单编号，车牌号)
    pageNum: 1,
    pageSize: 10
  },
})


// table
const tableData = reactive({
  LeftData: [
    {url:'business/yfbz/age60Manage/doInit', queryParams:'{}', res:'{code:"200", data:null}', }
  ],
  RightData: [
    {url:'business/yfbz/age60Manage/doInit', queryParams:'{}', res:'{code:"200", data:null}', }
  ],
  initList() {
    console.log('initList')

    // axios.get('/user/list', { params: formData.queryParams }).then((res: any) => {
    //   if (res.success && res.result) {
    //     reactiveData.tableData = res.result.list
    //     reactiveData.pageTotal = res.result.total
    //   }
    // })
  }
})


</script>

<style scoped lang="stylus">
.Report{
  overflow: hidden;
  box-sizing border-box

  margin:10px 5px 50px
  padding: 15px

  border: 1px solid rgba(64, 158, 255, 0.5)
  background-color: rgba(223, 237, 255, 0.2);

  -webkit-border-radius: 10px
  -moz-border-radius: 10px
  border-radius: 10px

  p{
    line-height: 1.6
    margin-bottom: 6px
  }
}


.elRowWrap{
  .titWrap{
    margin-bottom: 15px
    width:100%
    font-size:18px
    line-height:50px
    padding-left: 10px
    background-color: rgba(223, 237, 255, 0.2);
    border-left: 5px solid rgba(64, 158, 255, 0.2);
  }
  .el-col{
    box-sizing border-box
    //padding:0 10px
  }
  .left{
    padding-right:20px
  }
  .right{
    padding-left:20px
  }
}

//.page-container{
//  .createBtn{
//    float: right;
//  }
//}
.el-pagination{
  margin: 10px 0;
  padding: 10px 0;
  justify-content center
}
//.dialogWrap{
//  .el-form-item{
//    //display block
//    width:300px
//  }
//}

.dataView{
  margin-top: -20px
  margin-bottom: 10px

  .item{
    padding: 15px 5px;
    float: left;
    width: 300px
    line-height: 1.4
    font-size:16px

    .str{
      float: left;
      margin-right: 5px
      width: 65px
      padding-right: 20px
      text-align: right;
      color: #999
    }
    p{
      font-weight: bold;
      overflow: hidden;
    }
  }
}

:deep(.el-dialog__body){
  padding-bottom:0
}
:deep(.el-dialog__footer){
  text-align: center
}
</style>
